<template>
  <back-dialog-base
    :title="title"
    :visible="visibleAuditDialog"
    width="410px"
    @onCommit="handleSubmit"
  >
    <template #content>
      <div class="content-wrap">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="96px"
          v-if="props.title === '审批' || props.title === '开工审批'"
        >
          <el-form-item label="审批结果：" prop="result">
            <el-radio-group v-model="form.result">
              <el-radio label="0">通过</el-radio>
              <el-radio label="1">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见：" prop="opinion">
            <el-input v-model="form.opinion" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="96px"
          v-if="props.title === '已完工'"
        >
          <el-form-item label="审批结果：" prop="result">
            <el-radio-group v-model="form.result">
              <el-radio label="0">已完工</el-radio>
              <el-radio label="1">延期</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注：" prop="opinion">
            <el-input v-model="form.opinion" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { savePipeaduit } from '@/api/pipeline'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleAuditDialog: {
    type: Boolean,
    default: false
  },
  AuditData: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  bizId: '', //当前数据的id
  result: '',
  opinion: ''
  // status: '' //当前数据状态
})
const rules = reactive({
  result: [{ required: true, message: '请选择分析结果', trigger: 'blur' }]
})

const handleSubmit = () => {
  // console.log(form)
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const save = async (data) => {
  await savePipeaduit(data).then(() => {
    message({ type: 'success', message: '审核成功!' })
    clearForm()
    emits('onReload')
  })
}

const clearForm = () => {
  formRef.value.resetFields()
  form.value = {
    result: '',
    opinion: '',
    bizId: ''
  }
}
watch(
  () => props.AuditData,
  () => {
    form.bizId = props.AuditData.pipelineApplyForm.id
  }
)
</script>

<style lang="scss" scoped>
.font {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #333333;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 100%;
}
.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 13px;
  .right-form {
    span {
      width: 26px;
      height: 15px;
    }
  }
}
.el-input {
  width: 150px;
}
.el-select {
  width: 150px;
}
</style>
